<template>
    <div class="hp-page">
        <el-card class="center">
            <el-form :inline="true" :model="form" label-width="110px">
                <el-form-item label="货品类型名称 :">
                    <el-input placeholder="请输入货品类型名称" v-model="form.hwlxName"></el-input>
                </el-form-item>
                <el-form-item label="运输车型 :">
                    <el-select v-model="form.yscx" placeholder="请选择运输车型">
                        <el-option label="面包" value="面包" />
                        <el-option label="大货车" value="大货车" />
                        <el-option label="飞机" value="飞机" />
                        <el-option label="卡车" value="卡车" />
                        <el-option label="轮船" value="轮船" />
                        <el-option label="中云" value="中云" />
                        <el-option label="aa" value="aa" />
                        <el-option label="bb" value="bb" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formright">
                    <el-button class="formSubmit" color="#e15536" type="primary" @click="onSubmit">搜索</el-button>
                    <el-button class="formSubmit" @click="reSet">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="bottom">
            <div>
                <el-button :icon="Plus" color="#e15536" type="primary" class="allocation" @click="addForm = true">新增货物类型
                </el-button>
            </div>
            <div>
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column prop="a" label="序号" width="50" />
                    <el-table-column prop="_id" label="货物类型编号" />
                    <el-table-column prop="hwlxName" label="货物类型名称" />
                    <el-table-column prop="yscx" label="运输车型" />
                    <el-table-column prop="mrzl" label="默认重量(千克)" />
                    <el-table-column prop="mrtj" label="默认体积(方)" />
                    <el-table-column prop="desc" label="说明" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="editHuowu(scope.row)" class="TextButton" type="warning" text>修改
                            </el-button> |
                            <el-button @click="deleteHuowu(scope.row._id)" class="TextButton" type="danger" text>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 3, 4, 6]"
                    :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <!-- 添加弹出框 -->
        <el-dialog v-model="addForm" title="新增货物类型">
            <el-form :model="form1" label-position="right">
                <el-form-item label="货物类型名称" prop="hwlxName" :label-width="formLabelWidth"
                    :rules="{ required: true, message: '请输入货品类型名称', trigger: 'blur' }">
                    <el-input v-model="form1.hwlxName" autocomplete="off" placeholder="请输入货物类型名称"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="运输车型" :label-width="formLabelWidth">
                    <el-select v-model="form1.yscx" placeholder="请选择运输车型" multiple style="width: 700px;">
                        <el-option label="面包" value="面包" />
                        <el-option label="大货车" value="大货车" />
                        <el-option label="飞机" value="飞机" />
                        <el-option label="卡车" value="卡车" />
                        <el-option label="轮船" value="轮船" />
                        <el-option label="中云" value="中云" />
                        <el-option label="aa" value="aa" />
                        <el-option label="bb" value="bb" />
                    </el-select>
                </el-form-item>
                <el-form-item label="默认重量（千克）" :label-width="formLabelWidth">
                    <el-input v-model="form1.mrzl" autocomplete="off" placeholder="请输入默认重量"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="默认体积（方）" :label-width="formLabelWidth">
                    <el-input v-model="form1.mrtj" autocomplete="off" placeholder="请输入默认体积"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input v-model="form1.desc" autocomplete="off" placeholder="请输入说明"
                        style="width:700px;height:40px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="addHuowu" color="#e15536">添加</el-button>
                    <el-button @click="offAdd">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改弹出框 -->
        <el-dialog v-model="editForm" title="新增货物类型">
            <el-form :model="form2" label-position="right">
                <el-form-item label="货物id" prop="_id" :label-width="formLabelWidth">
                    <el-input v-model="form2._id" autocomplete="off" placeholder="请输入货物id"
                        style="width:700px;height:40px" disabled />
                </el-form-item>
                <el-form-item label="货物类型名称" prop="hwlxName" :label-width="formLabelWidth"
                    :rules="{ required: true, message: '请输入货品类型名称', trigger: 'blur' }">
                    <el-input v-model="form2.hwlxName" autocomplete="off" placeholder="请输入货物类型名称"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="运输车型" :label-width="formLabelWidth">
                    <el-select v-model="form2.yscx" placeholder="请选择运输车型" multiple style="width: 700px;">
                        <el-option label="面包" value="面包" />
                        <el-option label="大货车" value="大货车" />
                        <el-option label="飞机" value="飞机" />
                        <el-option label="卡车" value="卡车" />
                        <el-option label="轮船" value="轮船" />
                        <el-option label="中云" value="中云" />
                        <el-option label="aa" value="aa" />
                        <el-option label="bb" value="bb" />
                    </el-select>
                </el-form-item>
                <el-form-item label="默认重量（千克）" :label-width="formLabelWidth">
                    <el-input v-model="form2.mrzl" autocomplete="off" placeholder="请输入默认重量"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="默认体积（方）" :label-width="formLabelWidth">
                    <el-input v-model="form2.mrtj" autocomplete="off" placeholder="请输入默认体积"
                        style="width:700px;height:40px" />
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input v-model="form2.desc" autocomplete="off" placeholder="请输入说明"
                        style="width:700px;height:40px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="confirmEdit" color="#e15536">修改</el-button>
                    <el-button @click="offEdit">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible" title="" width="30%">
            <span>确定要删除吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmDel">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const form = ref({
    hwlxName: "",
    yscx: "",
})
const form1 = ref({
    hwlxName: "",
    yscx: "",
    mrzl: "",
    mrtj: "",
    desc: "",
})
const form2 = ref({
    _id: "",
    hwlxName: "",
    yscx: "",
    mrzl: "",
    mrtj: "",
    desc: "",
})
const formLabelWidth = '140px'
const addForm = ref(false)
const editForm = ref(false)
const dialogVisible = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(3)
const value = ref()
const tableData = ref([])
const deleteId = ref(0)

const getData = (pagesize, pagenum, hwlxname, yscx) => {
    axios.get(`/hplx?pagesize=${pagesize}&pagenum=${pagenum}&hwlxName=${hwlxname}&yscx=${yscx}`).then(res => {
        res.data.data.forEach((item, index) => {
            item.a = index + 1
        })
        tableData.value = res.data.data
        total.value = res.data.total
    })
}

const deleteHuowu = (id) => {
    dialogVisible.value = true
    deleteId.value = id
}

const confirmDel = () => {
    axios.delete("/delhp?id=" + deleteId.value).then(res => {
        if (res.data.code == 200) {
            dialogVisible.value = false
            ElMessage('删除成功！')
            getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
        }
    })
}

const editHuowu = (data) => {
    form2.value._id = data._id
    form2.value.hwlxName = data.hwlxName
    form2.value.yscx = data.yscx.split(" ")
    form2.value.mrtj = data.mrtj
    form2.value.mrzl = data.mrzl
    form2.value.desc = data.desc
    editForm.value = true
}

const confirmEdit = () => {
    form2.value.yscx = Object.values(form2.value.yscx).join(" ")
    axios.put("/sethp?id=" + form2.value._id + "&hwlxName=" + form2.value.hwlxName + "&yscx=" + form2.value.yscx + "&mrtj=" + form2.value.mrtj + "&mrzl=" + form2.value.mrzl + "&desc=" + form2.value.desc).then(res => {
        if (res.data.code == 200) {
            editForm.value = false
            ElMessage('修改成功！')
            getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
        }
    })
}

const addHuowu = () => {
    console.log(form1.value);
    let str = ""
    form1.value.yscx.forEach((item) => {
        str += " " + item
    })
    form1.value.yscx = str.trim()
    console.log(form1.value.yscx);
    axios.post(`/addhp`, form1.value).then(res => {
        form1.value.hwlxName = ""
        form1.value.yscx = ""
        form1.value.mrtj = ""
        form1.value.mrzl = ""
        form1.value.desc = ""
        addForm.value = false
        getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
    })
}

const onSubmit = () => {
    pageSize.value = 3
    currentPage.value = 1
    getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
}

const offAdd = () => {
    form1.value.hwlxName = ""
    form1.value.yscx = ""
    form1.value.mrtj = ""
    form1.value.mrzl = ""
    form1.value.desc = ""
    addForm.value = false
}

const reSet = () => {
    form.value.hwlxName = ""
    form.value.yscx = ""
    pageSize.value = 3
    currentPage.value = 1
    getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
}

const handleSizeChange = (a) => {
    pageSize.value = a
    getData(a, currentPage.value, form.value.hwlxName, form.value.yscx)
}

const handleCurrentChange = (a) => {
    currentPage.value = a
    getData(pageSize.value, a, form.value.hwlxName, form.value.yscx)
}

onMounted(() => {
    getData(pageSize.value, currentPage.value, form.value.hwlxName, form.value.yscx)
})

</script>

<style lang="less" scoped>
.hp-page {
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;

    .center {
        height: 80px;
        padding-top: 5px;
        box-sizing: border-box;

        .formright {
            box-sizing: border-box;
            margin-left: 20px;

            .formSubmit {
                width: 80px;
            }
        }

    }

    .bottom {
        // width: 97.7%;
        margin: 0;
        box-sizing: border-box;
        // padding: 20px;
        margin-top: 20px;

        .allocation {
            width: 140px;
            height: 42px;
        }

        .el-table {
            margin-top: 20px;
            text-align: center;

            .TextButton {
                margin-left: 20px;
                margin: 0;
                padding: 0;
            }
        }
    }

    .pagination {
        width: 600px;
        margin: 0 auto;
        margin-top: 30px;
    }

    .el-button--text {
        margin-right: 15px;
    }

    .dialog-footer {
        text-align: center;
    }

    .dialog-footer button:first-child {
        // margin-right: 10px;
    }
}
</style>